<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2025青岛理工大学SQA - AD报名表</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: "Alibaba PuHuiTi 2.0", Arial, sans-serif;
            font-size: 14px;
            line-height: normal;
        }

        form {
            width: 800px;
            background-color: white;
            border: 2px solid #6699ff;
            border-radius: 5px;
            padding: 20px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }

        .header {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 20px;
        }

        .logo-main {
            height: 50px;
            max-width: 100%;
            margin-right: 10px;
            vertical-align: middle;
        }

        .logo-secondary {
            height: 50px;
            max-width: 100%;
            margin-right: 10px;
            vertical-align: middle;
        }

       .school-name {
            font-size: 18px;
            font-weight: bold;
            color: #0066cc;
            text-align: center;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-size: 14px;
            color: #333;
        }

        input[type="text"],
        input[type="date"],
        input[type="number"] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 3px;
            margin-bottom: 5px;
            transition: border-color 0.3s ease;
        }

        input[type="text"]:focus,
        input[type="date"]:focus,
        input[type="number"]:focus {
            border-color: #0066cc;
        }

        input[type="radio"],
        input[type="checkbox"] {
            margin-right: 5px;
        }

        .btn-submit {
            display: block;
            width: 100%;
            padding: 10px;
            background-color: #0066cc;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            margin-top: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
        }

        .btn-submit:hover {
            background-color: #004499;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
        }

        .file-upload {
            display: flex;
            align-items: center;
            margin-top: 5px;
        }

        .file-upload input[type="file"] {
            display: none;
        }

        .file-upload label {
            background-color: #e6e6e6;
            padding: 8px 15px;
            border-radius: 3px;
            cursor: pointer;
        }

        .file-upload .icon {
            width: 20px;
            height: 20px;
            margin-right: 5px;
        }
    </style>
</head>

<body>
    <form action="#">
        <div class="header">
            <img class="logo-main" src="青岛理工大学.png">
            <div class="school-name">
                2025<br>青岛理工大学<br>SQA-AD 报名表
            </div>
            <img class="logo-secondary" src="public/images/qdlgdx.png">
        </div>
        <div class="form-group">
            <label for="name">学生姓名 Name *</label>
            <input type="text" id="name" placeholder="请输入学生姓名" required>
        </div>
        <div class="form-group">
            <label for="gender">性别 Gender *</label>
            <input type="radio" id="male" name="gender" value="M" required>
            <label for="male">男 M</label>
            <input type="radio" id="female" name="gender" value="F">
            <label for="female">女 F</label>
        </div>
        <div class="form-group">
            <label for="birthdate">出生日期 Date of Birth *</label>
            <input type="date" id="birthdate" required>
        </div>
        <div class="form-group">
            <label for="idnumber">身份证(护照)号码 ID (Passport) No. *</label>
            <input type="text" id="idnumber" placeholder="请输入身份证或护照号码" required>
        </div>
        <div class="form-group">
            <label for="visastatus">有无拒签史 Visa Status Check *</label>
            <input type="radio" id="no" name="visastatus" value="No" required>
            <label for="no">无 No</label>
            <input type="radio" id="yes" name="visastatus" value="Yes">
            <label for="yes">有 Yes</label>
        </div>
        <hr>
        <div class="form-group">
            <label for="address">通讯地址 Contact Address *</label>
            <input type="text" id="address" placeholder="请输入通讯地址" required>
        </div>
        <div class="form-group">
            <label for="contact">学生联系方式 Student Contact Number *</label>
            <input type="text" id="contact" placeholder="请输入联系方式" required>
        </div>
        <div class="form-group">
            <label for="fathername">父亲姓名 Father's Name *</label>
            <input type="text" id="fathername" placeholder="请输入父亲姓名" required>
        </div>
        <div class="form-group">
            <label for="fathercontact">父亲联系方式 Father's Contact Number *</label>
            <input type="text" id="fathercontact" placeholder="请输入父亲联系方式" required>
        </div>
        <div class="form-group">
            <label for="mothername">母亲姓名 Mother's Name *</label>
            <input type="text" id="mothername" placeholder="请输入母亲姓名" required>
        </div>
        <div class="form-group">
            <label for="mothercontact">母亲联系方式 Mother's Contact Number *</label>
            <input type="text" id="mothercontact" placeholder="请输入母亲联系方式" required>
        </div>
        <div class="form-group">
            <label for="gaokaoscore">高考成绩 GaoKao Scores *</label>
            <input type="number" id="gaokaoscore" placeholder="请输入高考成绩" required>
        </div>
        <div class="form-group">
            <label for="gaokaoenglishscore">高考英语成绩 GaoKao English Score *</label>
            <input type="number" id="gaokaoenglishscore" placeholder="请输入高考英语成绩" required>
        </div>
        <div class="form-group">
            <label for="englishproficiency">其他语言成绩 English Proficiency *</label>
            <input type="text" id="englishproficiency" placeholder="请输入其他语言成绩">
        </div>
        <div class="form-group">
            <label for="major">申请专业 Subject Area *</label>
            <input type="radio" id="bm" name="major" value="Business Management" required>
            <label for="bm">商务管理 Business Management</label><br>
            <input type="radio" id="ba" name="major" value="Business Accounting">
            <label for="ba">商务会计 Business Accounting</label><br>
            <input type="radio" id="csd" name="major" value="Computing: Software Development">
            <label for="csd">计算机软件开发 Computing: Software Development</label>
        </div>
        <div class="form-group">
            <label for="countries">意向国家 Study Abroad（可多选） *</label><br>
            <input type="checkbox" id="uk" name="countries" value="GBR">
            <label for="uk">英国 (GBR)</label>
            <input type="checkbox" id="usa" name="countries" value="USA">
            <label for="usa">美国 (USA)</label>
            <input type="checkbox" id="canada" name="countries" value="CAN">
            <label for="canada">加拿大 (CAN)</label>
            <input type="checkbox" id="newzealand" name="countries" value="NZL">
            <label for="newzealand">新西兰 (NZL)</label>
            <input type="checkbox" id="australia" name="countries" value="AUS">
            <label for="australia">澳大利亚 (AUS)</label>
            <input type="checkbox" id="hungary" name="countries" value="HUN">
            <label for="hungary">匈牙利 (HUN)</label>
            <input type="checkbox" id="singapore" name="countries" value="SGP">
            <label for="singapore">新加坡 (SGP)</label>
            <input type="checkbox" id="others" name="countries" value="Others">
            <label for="others">其他 (Others)</label>
        </div>
        <div class="form-group">
            <label for="payment">考试费缴费截图 Payment Screenshot *</label>
            <div class="file-upload">
                <input type="file" id="payment">
                <label for="payment">上传文件</label>
                <img class="icon" src="public/images/union.svg" alt="上传图标">
            </div>
        </div>
        <button class="btn-submit" type="submit">立即提交</button>
    </form>
</body>

</html>